<%@ page import="com.lagou.studentsystem.model.User" %>
<%@ page import="java.util.List" %>
<%@ page import="com.lagou.studentsystem.model.Classes" %><%--
  Created by IntelliJ IDEA.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理系统-管理页面</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">
    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="bootstrap.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
    .pagination_div {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div class="page-header" style="margin-left: 50px">
    <h1>
        学生管理系统
    </h1>

    <button class=" btn btn-primary" id="class_management" >班级信息管理</button>
    <button class=" btn btn-primary" id="student_management" >学生信息管理</button>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <h1 style="margin-top: 50px;margin-bottom: 50px">
                    登陆成功，欢迎<%=((User) session.getAttribute("user")).getUserName()%>使用</h1>
                <div style="margin-left: 640px;margin-bottom: 50px">
                    <caption>
                        <button class=" btn btn-primary" id="user_add" data-toggle="modal" data-target="#myModal">新增
                        </button>
                        <button class="btn btn-primary" id="user_delete" type="submit">删除</button>
                        <button class="btn btn-primary" id="user_edit" data-toggle="modal" data-target="#myModal">编辑
                        </button>
                        <button class="btn btn-primary" id="user_find" type="submit">查询</button>
                        <input type="text" id="s_code" placeholder="按班级编号查询" style="width: 130px;" name="s_code">
                        <input type="text" id="s_username" placeholder="按班主任姓名查询" style="width: 130px;" name="s_username">
                    </caption>
                </div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>
                        </th>
                        <th>
                            班级编号
                        </th>
                        <th>
                            班级名称
                        </th>
                        <th>
                            年级
                        </th>
                        <th>
                            班主任名称
                        </th>
                        <th>
                           班级口号
                        </th>
                        <th>
                            班级人数
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    <%

                        List<Classes> classesList = (List) session.getAttribute("classesList");
                        int size = classesList.size();
                        for (int i = 0; i < classesList.size(); i++) {
                    %>
                    <tr>
                        <td>
                            <label>
                                <input type="checkbox" name="checkbox">
                            </label>
                        </td>
                        <td id="tdc_id"><%=classesList.get(i).getC_id()%></td>
                        <td id="tdc_name"><%=classesList.get(i).getC_name()%></td>
                        <td id="tdc_grade"><%=classesList.get(i).getC_grade()%></td>
                        <td id="tdc_teacher"><%=classesList.get(i).getC_teacher()%></td>
                        <td id="tdc_slogan"><%=classesList.get(i).getC_slogan()%></td>
                        <td id="tdc_size"><%=classesList.get(i).getC_size()%></td>
                        <%
                            }
                         %>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- 模态框 -->
    <div class="modal" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-hidden="true">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel"> 新增班级</h4>
                </div>
                <form action="InsertStudent" method="post" role="form" id="from_action">
                    <div class="modal-body" id="modal-body">
                        <label for="name">班级编号</label>
                        <input type="text" class="form-control" id="c_id" placeholder="请输入班级编号" name="c_id">
                        <input type="text" hidden="hidden" id="oldClassesId" name="oldClassesId">
                        <label for="name">班级名称</label>
                        <input type="text" class="form-control" id="c_name" placeholder="请输入姓名" name="c_name">
                        <label for="name">班主任姓名</label>
                        <input type="text" class="form-control" id="c_teacher" placeholder="请输入班主任姓名" name="c_teacher">
                        <label for="name">班级口号</label>
                        <input type="text" class="form-control" id="c_slogan" placeholder="请输入班级口号" name="c_slogan">
                        <div>
                            <label for="name">年级</label>
                            <div></div>
                            <select id="c_grade" name="c_grade">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                            </select>
                        </div>
                        <label for="name">班级人数</label>
                        <input type="text" class="form-control" id="c_size" placeholder="请输入班级人数" name="c_size">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">提交更改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="pagination_div">

        <ul class="pagination">
            <%
                // 声明一个局部变量i负责来实现当前页和上一页以及下一页的控制
                int i = 1;
                // 声明一个变量来获取总页数
                int len = classesList.size()/10+1;
            %>

            <li><a href="classesPageQueryServlet?page=<%=(i>1?--i:i)%>">&laquo;上一页</a></li>
            <%
                // 循环显示所有页码
                for (int j = 1; j <= len; j++) {
                    // 当页码过多时需要使用...来代表，此时的编写思路就是采用条件判断
                    // 若j的数值大于某个范围且小于某个范围时，把打印j的位置换成...即可
                    // 当然随着当前页的改变也会随之改变，这就是纯JavaSE功底了，没时间写了...
                    //if (j == i) {
            %>
            <li><a href="classesPageQueryServlet?page=<%=j%>" id=<%=j%>> <%=j%> </a></li>
            <%--<li class="active"><a href="studentPageQueryServlet?page=<%=i%>" id=<%=i%>> <%=i%> </a></li>--%>
            <%
                    //}
                }
            %>
            <li><a href="classesPageQueryServlet?page=<%=(i<len?++i:i)%>">&raquo;下一页</a></li>
            <%--<li><a href="#">总共<%=len%>页</a></li>--%>
        </ul>

    </div>
    <script type="text/javascript">

        // 删除用户
        $("#user_delete").on("click", function () {
            var checkbox = $("input[type='checkbox']");  // 获取所有的复选框
            let f = false;  // 是否选中用户的标记
            for (var i = 0; i < checkbox.length; i++) {
                var box = checkbox[i];
                if (box.checked) {   // 某个复选框被选中的
                    f = true;  // 标记 有复选框被选中
                    box = $(box);  // jsdom对象转换成jquery对象
                    let c_id = box.parent().parent().next().text();  // 复选框父级的兄弟#code元素
                    window.location = ("removeClasses?c_id=" + c_id);
                }
            }
            if (!f) {
                alert("请选择一个用户！");
            }
        });

        // 新增用户
        $("#user_add").on("click", function () {
            $("#from_action").attr("action", "InsertClasses");

        });

        // 编辑用户
        $("#user_edit").on("click", function () {
            var checkboxs = $("input[type='checkbox']");
            let f = false;
            for (var i = 0; i < checkboxs.length; i++) {
                var box = checkboxs[i];
                if (box.checked) {  // 某个复选框被选中的
                    f = true;
                    $(this).attr("data-toggle", "modal");     // 启用模态框
                    $(this).attr("data-target", "#myModal");  // 启用模态框
                    box = $(box);  // jsdom对象转换成jquery对象
                    // 获取表格中选中用户的各项数据
                    var c_id = box.parent().parent().siblings("#tdc_id").text();
                    var c_name = box.parent().parent().siblings("#tdc_name").text();
                    var c_teacher = box.parent().parent().siblings("#tdc_teacher").text();
                    var c_slogan = box.parent().parent().siblings("#tdc_slogan").text();
                    var c_grade = box.parent().parent().siblings("#tdc_grade").text();
                    var c_size = box.parent().parent().siblings("#tdc_size").text();

                    // 选中用户的各项数据，放在模态框对应的input框中
                    $("#c_id").val(c_id);
                    $("#c_name").val(c_name);
                    $("#c_teacher").val(c_teacher);
                    $("#c_slogan").val(c_slogan);
                    $("#c_grade").val(c_grade);
                    $("#c_size").val(c_size);
                    $("#from_action").attr("action", "updateClasses");
                    $("#oldClassesId").val(c_id);
                }
            }
            if (!f) {
                alert("请选择一个用户！");
                $(this).attr("data-toggle", "null");     // 禁用模态框
                $(this).attr("data-target", "null");  // 禁用模态框
            }
        });


        // 查询用户
        $("#user_find").on("click", function () {
            var code = $("#s_code").val();
            var username = $("#s_username").val();
            if (code == "" && username == "") {
                alert("请输入查询条件！（班级名称或者班主任姓名）");
            }
            window.location = ("findClassesByidOrName?id=" + code + "&name=" + username);
        });

        $("#returnMain").on("click", function () {
            window.location = ("findClassesAll");
        });

        $("#student_management").on("click", function () {
            window.location = ("findStudentAll");
        });

        $("#class_management").on("click", function () {
            window.location = ("findClassesAll");
        });


    </script>

</body>
</html>
